<template>
	<view class="index-page page">
		<loading v-if="showLoading"></loading>
		<scroll-view :scroll-y="true">
			<CustomNav title="活动" :isBack="false"></CustomNav>
			<view class="content">
				<view class="swiper-block">
					<swiper :indicator-dots="false" :autoplay="true" :circular="true" :interval="5000"
						style="height: 480rpx;">
						<swiper-item v-for="(item, index) in swiperList" :key="item.id">
							<image :src="cloudStorage+item.bannerUrl" mode="widthFix"></image>
						</swiper-item>
					</swiper>
				</view>

				<view style="padding: 30rpx;">
					<view class="notice-block" @click="navigate('/page_other/shopping/raffle')">
						<!-- <image :src="@/static/headlines.png" class="notice-img"></image> -->
						<image :src="cloudStorage+drawUrl" class="notice-img"></image>
						<!-- <view class="notice-item">
							<view class="name">抽奖送好礼</view>
							<view class="text">点击立刻参与</view>
						</view> -->
					</view>
					<view class="title-block">
						<view class="title FangZhengHanZhenGuangBiaoJianTi">甄选活动</view>
					</view>

					<view class="info-block">
						<view class="info-block-item" v-for="(item, index) in swiperList1" :key="item.id"
							@click="jumpActivity(item.classification)">
							<image class="info-img" :src="cloudStorage+item.bannerUrl" mode="aspectFill"></image>
							<template>
								<view class="item-title">{{item.name}}</view>
							</template>
							<view class="btn">
								立即进入
								<image class="ic_retangle_right" :src="cloudStorage+'/file/retangle.png'"></image>
							</view>
						</view>
					</view>

				</view>



			</view>
			<Tabbar style="position: fixed; left: 0; bottom: 0"></Tabbar>
		</scroll-view>
	</view>
</template>

<script>
	import CustomNav from '@/components/CustomNav/CustomNav';
	import Tabbar from '@/components/Tabbar/Tabbar';
	import {
		getBannerList
	} from '@/api/home.js'
	import {
		getUserBusinessList,
	} from '@/api/acticity.js';
	import {
		getBusinessTypeList
	} from '@/api/home.js';
	import {
		isMore
	} from '@/util/util.js'
	import {
		getStorage
	} from '@/util/auth';
	import {
		downloadFile,
	} from '@/uni_modules/almost-lottery/utils/almost-utils.js'
	import {
		
		getListApi
	} from '@/api/shopping.js'
	export default {
		components: {
			Tabbar,
		},
		data() {
			return {
				conf: {
					page: 1,
					limit: 10,
					businessName: '',
				},
				more: true,
				sort: 0,
				type: '',
				latitude: '',
				longitude: '',
				form: {
					isIndustry: '',
				},
				industryIndex: 0,
				industry: [],
				list: [],
				areaInfo: {
					areaId: ''
				},
				swiperList: [],
				swiperList1: [],
				drawUrl: ''
			};
		},
		async onLoad(e) {
			if (getStorage('position')) {
				this.areaInfo = getStorage('position');
			}
			//在活动页面预先下载抽奖资源
			this.getPrizeList()
			

			if (e.type) {
				this.form.isIndustry = e.type
				this.industryIndex = parseInt(parseInt(e.type) - 10);
			}
			uni.showCustomLoading();
			Promise.all([this.getDrawList(), this.getBannerList(), this.getBusinessTypeList(), this
				.getBannerListMiddle()
			]).finally(
				() => {
					uni.hideCustomLoading()
				})

		},
		methods: {
			//预先下载活动抽奖的逻辑
			getPrizeList() {
				if(getStorage('user'))
				{
					return getListApi().then(res => {
						if (res === '暂无活动') {
							return;
						} else {
							if (res.prizeList) {
								let data = res.prizeList || []
								data.forEach(item => {
									item.prizeImage = this.cloudStorage + item.prizeImage
									downloadFile(item.prizeImage)
								})
								
							}
							
						}
					})
				}
				
			},
			getDrawList() {
				return getBannerList({
					type: 6,
					classification: 0
				}).then((res) => {
					this.drawUrl = res.list[0].bannerUrl
				})
			},
			getBannerList() {
				return getBannerList({
					type: 3,
					classification: 0
				}).then((res) => {
					this.swiperList = res.list
				})
			},
			jumpActivity(jumpActivity) {
				if (jumpActivity === 1) {
					uni.navigateTo({
						// url: '/page_other/activity/index?jumpActivity=' + jumpActivity
						url: '/page_other/activities/list?jumpActivity=' + jumpActivity
					})
				} else if (jumpActivity === 5) {
					uni.navigateTo({
						url: '/page_other/activities/consumption?jumpActivity=' + jumpActivity
					})
				}

			},
			//中间轮播图
			getBannerListMiddle() {
				return getBannerList({
					type: 4,
				}).then((res) => {
					this.swiperList1 = res.list
				})
			},
			screen(e) {
				this.sort = e
				this.conf.page = 1
				this.getBannerListMiddle()
			},
			handleRefresh() {
				this.conf.page = 1;
				this.more = true
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				this.getBannerListMiddle()
			},
			//获取商家类型
			getBusinessTypeList() {
				return getBusinessTypeList().then((res) => {
					let list = res || []
					var obj = {
						id: 0,
						name: '全部'
					}
					list.unshift(obj)
					this.industry = list
				})
			},
			bindIndustry(e) {
				this.industryIndex = e.detail.value;
				this.form.isIndustry = this.industry[this.industryIndex].id
				this.conf.page = 1
				this.getBannerListMiddle()
			},
			onChange(e) {
				console.log(e)
			},
		},
		// onPullDownRefresh() {
		// 	this.handleRefresh();
		// },
		// onReachBottom() {
		// 	if (this.more) {
		// 		this.conf.page++;
		// 		uni.showLoading({
		// 			title: '加载中',
		// 			mask: true
		// 		})
		// 		this.getBannerListMiddle()
		// 	}
		// },
	};
</script>

<style scoped lang="scss">
	.index-page {
		overflow: hidden;

		.top-banner {
			width: 100%;
		}

		.content {
			width: 100%;
			margin-bottom: 140rpx;
			// position: relative;

			.info-block {
				margin-top: 20rpx;

				.info-block-item {
					margin-bottom: 35rpx;
					height: 320rpx;
					border-radius: 20rpx;
					box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
					position: relative;

					.info-img {
						width: 100%;
						height: 220rpx;
						border-radius: 20rpx 20rpx 0 0;
					}

					.item-title {
						font-weight: bold;
						font-size: 36rpx;
						margin-left: 30rpx;
						margin-top: 18rpx;
					}

					.btn {
						position: absolute;
						background: linear-gradient(45deg, #ff2f34, #ff8e53);
						/* 添加渐变效果 */
						box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
						/* 添加阴影效果 */
						display: inline-block;
						padding: 6px 12px;
						/* 调整内边距以控制胶囊的大小 */
						border-radius: 20px;
						/* 圆角的大小 */
						bottom: 0;
						right: 30rpx;
						color: white;
						line-height: 38rpx;
						margin-bottom: 20rpx;
						width: 200rpx;
						height: 60rpx;
						font-size: 34rpx;
						font-weight: 500;

						.ic_retangle_right {
							position: absolute;
							margin-left: 10rpx;
							bottom: 18rpx;
							width: 25rpx;
							height: 25rpx;
							float: right;

						}
					}
				}
			}

			.swiper-block {
				width: 100%;
				height: 480rpx;
				border-radius: 20rpx;

				image {
					width: 100%;
				}
			}

			.notice-block {
				height: 180rpx;
				width: 100%;
				margin-top: 20rpx;
				// height: 110rpx;
				margin-bottom: 30rpx;

				.notice-img {
					width: 100%;
					height: 100%;
				}

				.notice-item {
					width: calc(100% - 160rpx);
					display: flex;
					align-items: center;
					background-image: linear-gradient(to right, #FFFFFF, #FEF8F6);
					height: 80rpx;
					border-radius: 20rpx;

					.name {
						background: linear-gradient(to right, #FE393A 30%, #FE4434 60%, #FE4E2E 90%);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-size: 34 rpx;
						width: 200 rpx;
						font-family: 'FangZhengHanZhenGuangBiaoJianTi';
					}

					.text {
						background: linear-gradient(to right, #FE512C 30%, #FE5B26 60%, #FE6B1D 90%);
						background-clip: text;
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-size: 34rpx;
						font-family: 'FangZhengHanZhenGuangBiaoJianTi';
					}
				}
			}

			.title-block {
				width: 100%;
				display: flex;
				justify-content: space-between;
				color: #FF2F34;
				align-items: center;

				.title {
					font-size: 36rpx;
				}
			}

		}
	}
</style>